<template>
	<div class="container">
		<van-nav-bar
		  class="head_top"	
		  :title="categoryName"
		  left-arrow
		  @click-left="onClickLeft"
		>		
			<van-icon name="arrow-left" slot="left" color="#333"  size="20"/>
	    </van-nav-bar>	
	    
	   <div class="noData" v-if="showNoData">
	   	<img src="../../../../static/img/lanhu/noData.png" alt="" />
	   </div>	 	    
	    <div style="margin-top: 50px;">
	    	
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			  <van-list
			    v-model="loading"
			    :finished="finished"
			    :finished-text="finishedText"
			    @load="onLoad"
			    :immediate-check="false"
			  >	
			  
			    <div class="outWrap">			    	
			    	<div class="section" v-for="(item,index) in list"  :key="index" @click="linkDetail(item)">
			    		<div class="left leftWrap" :style="{backgroundImage: 'url(' + item.goodsImage + ')'}">
			    		</div>
			    		<div class="right">
			    			<div class="word1">{{item.comDesc}}</div>
			    			<div class="word2_wrap">
			    				<div class="word2 active">￥{{item.comPrice}}</div>
			    				<div class='word2'>{{item.goodsWants}}人想要</div>
			    			</div>
			    			<div class="word3_wrap">
			    				<div class="word3_left">
			    					<img :src="item.avatar" alt="" v-if="item.avatar"/>
			    					<img src="../../../../static/img/lanhu/45.png" alt="" v-else/>
			    				</div>
			    				<div class="word3_right">{{item.userNickname}}</div>
			    			</div>
			    		</div>
			    	</div>
			    </div>
			  
			  </van-list>
			</van-pull-refresh> 		
		</div>       

	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
       	  loading: false,    // 是否处于数据加载状态 
	      finished: false,   // 是否处于数据最底部的状态 
	      refreshing: false, // 是否处于下拉刷新状态         
          pageNum:1,         // 当前数据的页码数
          pages:0,           // 储存数据的最大页码数
          list:[],           // 储存数据用
          userId:'',         // 登陆者的用户ID  
          url2:this.$api+'/marketorderservice/api/v1/market/searchGoodsList',   // 用于请求商品数据列表
          showNoData:false,   
          categoryId:'',      // 商品分类ID
          categoryName:'',
          finishedText:'',
          
       }
	},
	methods: {
	   linkDetail(item){
	   	   let arg='[{"comId":"'+item.comId+'"}]' 
	   	   this.linkGoodsDetail(this.userId,item.comUid,arg)   	
	   },
	   // 时间转化
	   formatTime(str){
	   	  if(str){
	   	  	return this.timeago(str)
	   	  }else{
	   	  	return ''
	   	  }
	   },
	   // 下拉刷新函数	
	   onRefresh() {
		  setTimeout(() => {
	          this.pageNum=1
	          this.list=[]
	          this.getData()	
	          this.finished = false;
	          this.loading=false
			  this.refreshing = false;
		  }, 1000);          
	   },
	   // 上拉加载函数
	   onLoad(){	   	 
		 setTimeout(() => {		 	
	        if (this.refreshing) {
	          this.list = [];
	          this.refreshing = false;
	        }	        
	        this.pageNum++
	        if(this.pageNum>this.pages){this.finished = true;}
	        else{
              this.getData()
	          this.loading = false;	    
	          this.finishedText='我也是有底线的'
	        }
	      }, 1000);   	
	   },		
       // 获取数据
       getData(){
       	    let that=this
       	    let params={
       	    	categoryId:this.categoryId
       	    }
       	    this.$Axios2.postRequest(this.url2,params,{pageNum:this.pageNum,pageSize:'5'})
		    .then(function(res) {
		    	
				if(res.data.page.total==0){
				  that.showNoData=true
				}		
                that.list=that.list.concat(res.data.page.records)
                that.pages=res.data.page.pages				
		    })       	
       }
	},
	mixins:[publicFun],	
	mounted() {
	    this.userId=this.$router.currentRoute.query.userId; 
	    this.categoryId=this.$router.currentRoute.query.categoryId; 
	    this.categoryName=this.$router.currentRoute.query.categoryName; 
		this.getData()
	}
}	
</script>

<style scoped="" lang="scss">
.container{position: absolute;left: 0;top: 0;background: #f8f8f8;min-height: 100%;width: 100%;}
.leftWrap{width: 120px;height: 120px;overflow: hidden;background-repeat: no-repeat;background-size:cover;background-position: 50% 50%;border-radius: 4px;}
.outWrap{padding: 0 10px;background: #fff;
   .section{padding: 10px 0;border-bottom: 1px solid #f0f0f0;display:flex;
      .right{flex: 1;margin-left: 10px;
        .word1{font-size: 13px;color: #333;line-height: 18px;min-height: 34px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
        .word2_wrap{display: flex;justify-content: space-between;margin-top: 18px;align-items: center;
          .word2{padding: 5px 0;color: #999;}
          .word2.active{color: #FF3B30;font-size: 13px;font-weight: bold;width: 70%;border-bottom: 1px solid #f0f0f0;}
        }
        .word3_wrap{display: flex;margin-top: 10px;align-items: center;
           .word3_left img{width: 30px;height: 30px;}
           .word3_right{margin-left: 10px;}
        }
      }
   }
   .section:nth-last-child(1){border-bottom:none}
}
</style>